/*
Copyright 2017 Ziadin Givan

Licensed under the Apache License, Version 2.0 (the "License");
you may not use this file except in compliance with the License.
You may obtain a copy of the License at

   http://www.apache.org/licenses/LICENSE-2.0

Unless required by applicable law or agreed to in writing, software
distributed under the License is distributed on an "AS IS" BASIS,
WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
See the License for the specific language governing permissions and
limitations under the License.

https://github.com/givanz/Vvvebjs
*/

bgcolorClasses = ["bg-primary", "bg-secondary", "bg-success", "bg-danger", "bg-warning", "bg-info", "bg-light", "bg-dark", "bg-white"]

bgcolorSelectOptions =
    [{
        value: "默认",
        text: ""
    },
    {
        value: "bg-primary",
        text: "主色"
    }, {
        value: "bg-secondary",
        text: "次色"
    }, {
        value: "bg-success",
        text: "成功"
    }, {
        value: "bg-danger",
        text: "危险"
    }, {
        value: "bg-warning",
        text: "警告"
    }, {
        value: "bg-info",
        text: "信息"
    }, {
        value: "bg-light",
        text: "高亮"
    }, {
        value: "bg-dark",
        text: "暗色"
    }, {
        value: "bg-white",
        text: "白色"
    }];

function changeNodeName(node, newNodeName) {
    var newNode;
    newNode = document.createElement(newNodeName);
    attributes = node.get(0).attributes;

    for(i = 0, len = attributes.length; i < len; i++) {
        newNode.setAttribute(attributes[i].nodeName, attributes[i].nodeValue);
    }

    $(newNode).append($(node).contents());
    $(node).replaceWith(newNode);

    return newNode;
}

Vvveb.ComponentsGroup['Bootstrap 4'] =
    ["html/container", "html/gridrow", "html/button", "html/buttongroup", "html/buttontoolbar", "html/heading", "html/image", "html/jumbotron", "html/alert", "html/card", "html/listgroup", "html/hr", "html/taglabel", "html/badge", "html/progress", "html/navbar", "html/breadcrumbs", "html/pagination", "html/form", "html/textinput", "html/textareainput", "html/selectinput", "html/fileinput", "html/checkbox", "html/radiobutton", "html/table", "html/paragraph", "html/link", "html/video", "html/button"];


var base_sort = 100;//start sorting for base component from 100 to allow extended properties to be first
var style_section = 'style';

Vvveb.Components.add("_base", {
    name: "元素",
    properties: [{
        key: "element_header",
        inputtype: SectionInput,
        name: false,
        sort: base_sort++,
        data: { header: "通用" },
    }, {
        name: "ID",
        key: "id",
        htmlAttr: "id",
        sort: base_sort++,
        inline: true,
        col: 6,
        inputtype: TextInput
    }, {
        name: "Class",
        key: "class",
        htmlAttr: "class",
        sort: base_sort++,
        inline: true,
        col: 6,
        inputtype: TextInput
    }
    ]
});

//display
Vvveb.Components.extend("_base", "_base", {
    properties: [
        {
            key: "display_header",
            inputtype: SectionInput,
            name: false,
            sort: base_sort++,
            section: style_section,
            data: { header: "显示" },
        }, {
            name: "显示",
            key: "display",
            htmlAttr: "style",
            sort: base_sort++,
            section: style_section,
            col: 6,
            inline: true,
            inputtype: SelectInput,
            validValues: ["block", "inline", "inline-block", "none"],
            data: {
                options: [{
                    value: "block",
                    text: "块"
                }, {
                    value: "inline",
                    text: "行内"
                }, {
                    value: "inline-block",
                    text: "行内块"
                }, {
                    value: "none",
                    text: "无"
                }]
            }
        }, {
            name: "位置",
            key: "position",
            htmlAttr: "style",
            sort: base_sort++,
            section: style_section,
            col: 6,
            inline: true,
            inputtype: SelectInput,
            validValues: ["static", "fixed", "relative", "absolute"],
            data: {
                options: [{
                    value: "static",
                    text: "静态"
                }, {
                    value: "fixed",
                    text: "固定"
                }, {
                    value: "relative",
                    text: "相对"
                }, {
                    value: "absolute",
                    text: "绝对"
                }]
            }
        }, {
            name: "上",
            key: "top",
            htmlAttr: "style",
            sort: base_sort++,
            section: style_section,
            col: 6,
            inline: true,
            parent: "",
            inputtype: CssUnitInput
        }, {
            name: "左",
            key: "left",
            htmlAttr: "style",
            sort: base_sort++,
            section: style_section,
            col: 6,
            inline: true,
            parent: "",
            inputtype: CssUnitInput
        }, {
            name: "下",
            key: "bottom",
            htmlAttr: "style",
            sort: base_sort++,
            section: style_section,
            col: 6,
            inline: true,
            parent: "",
            inputtype: CssUnitInput
        }, {
            name: "右",
            key: "right",
            htmlAttr: "style",
            sort: base_sort++,
            section: style_section,
            col: 6,
            inline: true,
            parent: "",
            inputtype: CssUnitInput
        }, {
            name: "浮动",
            key: "float",
            htmlAttr: "style",
            sort: base_sort++,
            section: style_section,
            col: 12,
            inline: true,
            inputtype: RadioButtonInput,
            data: {
                extraclass: "btn-group-sm btn-group-fullwidth",
                options: [{
                    value: "none",
                    icon: "la la-times",
                    //text: "None",
                    title: "无",
                    checked: true,
                }, {
                    value: "left",
                    //text: "Left",
                    title: "左",
                    icon: "la la-align-left",
                    checked: false,
                }, {
                    value: "right",
                    //text: "Right",
                    title: "右",
                    icon: "la la-align-right",
                    checked: false,
                }],
            }
        }, {
            name: "透明度",
            key: "opacity",
            htmlAttr: "style",
            sort: base_sort++,
            section: style_section,
            col: 12,
            inline: true,
            parent: "",
            inputtype: RangeInput,
            data: {
                max: 1, //max zoom level
                min: 0,
                step: 0.1
            },
        }, {
            name: "背景色",
            key: "background-color",
            sort: base_sort++,
            section: style_section,
            col: 6,
            inline: true,
            htmlAttr: "style",
            inputtype: ColorInput,
        }, {
            name: "文本颜色",
            key: "color",
            sort: base_sort++,
            section: style_section,
            col: 6,
            inline: true,
            htmlAttr: "style",
            inputtype: ColorInput,
        }]
});

//Typography
Vvveb.Components.extend("_base", "_base", {
    properties: [
        {
            key: "typography_header",
            inputtype: SectionInput,
            name: false,
            sort: base_sort++,
            section: style_section,
            data: { header: "排版" },

        }, {
            name: "字号",
            key: "font-size",
            htmlAttr: "style",
            sort: base_sort++,
            section: style_section,
            col: 6,
            inline: true,
            inputtype: CssUnitInput
        }, {
            name: "字体粗细",
            key: "font-weight",
            htmlAttr: "style",
            sort: base_sort++,
            section: style_section,
            col: 6,
            inline: true,
            inputtype: SelectInput,
            data: {
                options: [{
                    value: "",
                    text: "默认"
                }, {
                    value: "100",
                    text: "100"
                }, {
                    value: "200",
                    text: "200"
                }, {
                    value: "300",
                    text: "300"
                }, {
                    value: "400",
                    text: "正常(400)"
                }, {
                    value: "500",
                    text: "500"
                }, {
                    value: "600",
                    text: "600"
                }, {
                    value: "700",
                    text: "粗体(700)"
                }, {
                    value: "800",
                    text: "800"
                }, {
                    value: "900",
                    text: "900"
                }],
            }
        }, {
            name: "字体",
            key: "font-family",
            htmlAttr: "style",
            sort: base_sort++,
            section: style_section,
            col: 12,
            inline: true,
            inputtype: SelectInput,
            data: {
                options: [{
                    value: "",
                    text: "默认"
                }, {
                    value: "Arial, Helvetica, sans-serif",
                    text: "Arial"
                }, {
                    value: '\'Lucida Sans Unicode\', \'Lucida Grande\', sans-serif',
                    text: 'Lucida Grande'
                }, {
                    value: '\'Palatino Linotype\', \'Book Antiqua\', Palatino, serif',
                    text: 'Palatino Linotype'
                }, {
                    value: '\'Times New Roman\', Times, serif',
                    text: 'Times New Roman'
                }, {
                    value: "Georgia, serif",
                    text: "Georgia, serif"
                }, {
                    value: "Tahoma, Geneva, sans-serif",
                    text: "Tahoma"
                }, {
                    value: '\'Comic Sans MS\', cursive, sans-serif',
                    text: 'Comic Sans'
                }, {
                    value: 'Verdana, Geneva, sans-serif',
                    text: 'Verdana'
                }, {
                    value: 'Impact, Charcoal, sans-serif',
                    text: 'Impact'
                }, {
                    value: '\'Arial Black\', Gadget, sans-serif',
                    text: 'Arial Black'
                }, {
                    value: '\'Trebuchet MS\', Helvetica, sans-serif',
                    text: 'Trebuchet'
                }, {
                    value: '\'Courier New\', Courier, monospace',
                    text: 'Courier New'
                }, {
                    value: '\'Brush Script MT\', sans-serif',
                    text: 'Brush Script'
                }]
            }
        }, {
            name: "文字对齐",
            key: "text-align",
            htmlAttr: "style",
            sort: base_sort++,
            section: style_section,
            col: 12,
            inline: true,
            inputtype: RadioButtonInput,
            data: {
                extraclass: "btn-group-sm btn-group-fullwidth",
                options: [{
                    value: "",
                    icon: "la la-times",
                    //text: "None",
                    title: "无",
                    checked: true,
                }, {
                    value: "left",
                    //text: "Left",
                    title: "局左",
                    icon: "la la-align-left",
                    checked: false,
                }, {
                    value: "center",
                    //text: "Center",
                    title: "居中",
                    icon: "la la-align-center",
                    checked: false,
                }, {
                    value: "right",
                    //text: "Right",
                    title: "居右",
                    icon: "la la-align-right",
                    checked: false,
                }, {
                    value: "justify",
                    //text: "justify",
                    title: "两端对齐",
                    icon: "la la-align-justify",
                    checked: false,
                }],
            },
        }, {
            name: "行高",
            key: "line-height",
            htmlAttr: "style",
            sort: base_sort++,
            section: style_section,
            col: 6,
            inline: true,
            inputtype: CssUnitInput
        }, {
            name: "文字间距",
            key: "letter-spacing",
            htmlAttr: "style",
            sort: base_sort++,
            section: style_section,
            col: 6,
            inline: true,
            inputtype: CssUnitInput
        }, {
            name: "文字样式",
            key: "text-decoration-line",
            htmlAttr: "style",
            sort: base_sort++,
            section: style_section,
            col: 12,
            inline: true,
            inputtype: RadioButtonInput,
            data: {
                extraclass: "btn-group-sm btn-group-fullwidth",
                options: [{
                    value: "none",
                    icon: "la la-times",
                    //text: "None",
                    title: "无",
                    checked: true,
                }, {
                    value: "underline",
                    //text: "Left",
                    title: "下划线",
                    icon: "la la-long-arrow-alt-down",
                    checked: false,
                }, {
                    value: "overline",
                    //text: "Right",
                    title: "上划线",
                    icon: "la la-long-arrow-alt-up",
                    checked: false,
                }, {
                    value: "line-through",
                    //text: "Right",
                    title: "删除线",
                    icon: "la la-strikethrough",
                    checked: false,
                }, {
                    value: "underline overline",
                    //text: "justify",
                    title: "上下划线",
                    icon: "la la-arrows-alt-v",
                    checked: false,
                }],
            },
        }, {
            name: "颜色",
            key: "text-decoration-color",
            sort: base_sort++,
            section: style_section,
            col: 6,
            inline: true,
            htmlAttr: "style",
            inputtype: ColorInput,
        }, {
            name: "样式",
            key: "text-decoration-style",
            htmlAttr: "style",
            sort: base_sort++,
            section: style_section,
            col: 6,
            inline: true,
            inputtype: SelectInput,
            data: {
                options: [{
                    value: "",
                    text: "默认"
                }, {
                    value: "solid",
                    text: "实线"
                }, {
                    value: "wavy",
                    text: "波浪线"
                }, {
                    value: "dotted",
                    text: "点线"
                }, {
                    value: "dashed",
                    text: "虚线"
                }, {
                    value: "double",
                    text: "双实线"
                }],
            }
        }]
})

//Size
Vvveb.Components.extend("_base", "_base", {
    properties: [{
        key: "size_header",
        inputtype: SectionInput,
        name: false,
        sort: base_sort++,
        section: style_section,
        data: { header: "尺寸", expanded: false },
    }, {
        name: "宽",
        key: "width",
        htmlAttr: "style",
        sort: base_sort++,
        section: style_section,
        col: 6,
        inline: true,
        inputtype: CssUnitInput
    }, {
        name: "高",
        key: "height",
        htmlAttr: "style",
        sort: base_sort++,
        section: style_section,
        col: 6,
        inline: true,
        inputtype: CssUnitInput
    }, {
        name: "最小宽度",
        key: "min-width",
        htmlAttr: "style",
        sort: base_sort++,
        section: style_section,
        col: 6,
        inline: true,
        inputtype: CssUnitInput
    }, {
        name: "最小高度",
        key: "min-height",
        htmlAttr: "style",
        sort: base_sort++,
        section: style_section,
        col: 6,
        inline: true,
        inputtype: CssUnitInput
    }, {
        name: "最大宽度",
        key: "max-width",
        htmlAttr: "style",
        sort: base_sort++,
        section: style_section,
        col: 6,
        inline: true,
        inputtype: CssUnitInput
    }, {
        name: "最大高度",
        key: "max-height",
        htmlAttr: "style",
        sort: base_sort++,
        section: style_section,
        col: 6,
        inline: true,
        inputtype: CssUnitInput
    }]
});

//Margin
Vvveb.Components.extend("_base", "_base", {
    properties: [{
        key: "margins_header",
        inputtype: SectionInput,
        name: false,
        sort: base_sort++,
        section: style_section,
        data: { header: "外边距", expanded: false },
    }, {
        name: "顶部边距",
        key: "margin-top",
        htmlAttr: "style",
        sort: base_sort++,
        section: style_section,
        col: 6,
        inline: true,
        inputtype: CssUnitInput
    }, {
        name: "右边距",
        key: "margin-right",
        htmlAttr: "style",
        sort: base_sort++,
        section: style_section,
        col: 6,
        inline: true,
        inputtype: CssUnitInput
    }, {
        name: "底部边距",
        key: "margin-bottom",
        htmlAttr: "style",
        sort: base_sort++,
        section: style_section,
        col: 6,
        inline: true,
        inputtype: CssUnitInput
    }, {
        name: "左边距",
        key: "margin-left",
        htmlAttr: "style",
        sort: base_sort++,
        section: style_section,
        col: 6,
        inline: true,
        inputtype: CssUnitInput
    }]
});

//Padding
Vvveb.Components.extend("_base", "_base", {
    properties: [{
        key: "paddings_header",
        inputtype: SectionInput,
        name: false,
        sort: base_sort++,
        section: style_section,
        data: { header: "内边距", expanded: false },
    }, {
        name: "顶部边距",
        key: "padding-top",
        htmlAttr: "style",
        sort: base_sort++,
        section: style_section,
        col: 6,
        inline: true,
        inputtype: CssUnitInput
    }, {
        name: "左边距",
        key: "padding-right",
        htmlAttr: "style",
        sort: base_sort++,
        section: style_section,
        col: 6,
        inline: true,
        inputtype: CssUnitInput
    }, {
        name: "底部边距",
        key: "padding-bottom",
        htmlAttr: "style",
        sort: base_sort++,
        section: style_section,
        col: 6,
        inline: true,
        inputtype: CssUnitInput
    }, {
        name: "左边距",
        key: "padding-left",
        htmlAttr: "style",
        sort: base_sort++,
        section: style_section,
        col: 6,
        inline: true,
        inputtype: CssUnitInput
    }]
});


//Border
Vvveb.Components.extend("_base", "_base", {
    properties: [{
        key: "border_header",
        inputtype: SectionInput,
        name: false,
        sort: base_sort++,
        section: style_section,
        data: { header: "边框", expanded: false },
    }, {
        name: "样式",
        key: "border-style",
        htmlAttr: "style",
        sort: base_sort++,
        section: style_section,
        col: 12,
        inline: true,
        inputtype: SelectInput,
        data: {
            options: [{
                value: "",
                text: "默认"
            }, {
                value: "solid",
                text: "实线"
            }, {
                value: "dotted",
                text: "点线"
            }, {
                value: "dashed",
                text: "虚线"
            }],
        }
    }, {
        name: "宽度",
        key: "border-width",
        htmlAttr: "style",
        sort: base_sort++,
        section: style_section,
        col: 6,
        inline: true,
        inputtype: CssUnitInput
    }, {
        name: "颜色",
        key: "border-color",
        sort: base_sort++,
        section: style_section,
        col: 6,
        inline: true,
        htmlAttr: "style",
        inputtype: ColorInput,
    }]
});



//Border radius
Vvveb.Components.extend("_base", "_base", {
    properties: [{
        key: "border_radius_header",
        inputtype: SectionInput,
        name: false,
        sort: base_sort++,
        section: style_section,
        data: { header: "边框圆角", expanded: false },
    }, {
        name: "左上",
        key: "border-top-left-radius",
        htmlAttr: "style",
        sort: base_sort++,
        section: style_section,
        col: 6,
        inline: true,
        inputtype: CssUnitInput
    }, {
        name: "右上",
        key: "border-top-right-radius",
        htmlAttr: "style",
        sort: base_sort++,
        section: style_section,
        col: 6,
        inline: true,
        inputtype: CssUnitInput
    }, {
        name: "左下",
        key: "border-bottom-left-radius",
        htmlAttr: "style",
        sort: base_sort++,
        section: style_section,
        col: 6,
        inline: true,
        inputtype: CssUnitInput
    }, {
        name: "右下",
        key: "border-bottom-right-radius",
        htmlAttr: "style",
        sort: base_sort++,
        section: style_section,
        col: 6,
        inline: true,
        inputtype: CssUnitInput
    }]
});

//Background image
Vvveb.Components.extend("_base", "_base", {
    properties: [{
        key: "background_image_header",
        inputtype: SectionInput,
        name: false,
        sort: base_sort++,
        section: style_section,
        data: { header: "背景图片", expanded: false },
    }, {
        name: "图片",
        key: "Image",
        sort: base_sort++,
        section: style_section,
        //htmlAttr: "style",
        inputtype: ImageInput,

        init: function(node) {
            var image = $(node).css("background-image").replace(/^url\(['"]?(.+)['"]?\)/, '$1');
            return image;
        },

        onChange: function(node, value) {

            $(node).css('background-image', 'url(' + value + ')');

            return node;
        }

    }, {
        name: "重复",
        key: "background-repeat",
        sort: base_sort++,
        section: style_section,
        htmlAttr: "style",
        inputtype: SelectInput,
        data: {
            options: [{
                value: "",
                text: "默认"
            }, {
                value: "repeat-x",
                text: "水平重复"
            }, {
                value: "repeat-y",
                text: "垂直重复"
            }, {
                value: "no-repeat",
                text: "不重复"
            }],
        }
    }, {
        name: "尺寸",
        key: "background-size",
        sort: base_sort++,
        section: style_section,
        htmlAttr: "style",
        inputtype: SelectInput,
        data: {
            options: [{
                value: "",
                text: "默认"
            }, {
                value: "contain",
                text: "比例缩放"
            }, {
                value: "cover",
                text: "拉伸填充"
            }],
        }
    }, {
        name: "水平位置",
        key: "background-position-x",
        sort: base_sort++,
        section: style_section,
        htmlAttr: "style",
        col: 6,
        inline: true,
        inputtype: SelectInput,
        data: {
            options: [{
                value: "",
                text: "默认"
            }, {
                value: "center",
                text: "居中"
            }, {
                value: "right",
                text: "居右"
            }, {
                value: "left",
                text: "居左"
            }],
        }
    }, {
        name: "垂直位置",
        key: "background-position-y",
        sort: base_sort++,
        section: style_section,
        htmlAttr: "style",
        col: 6,
        inline: true,
        inputtype: SelectInput,
        data: {
            options: [{
                value: "",
                text: "默认"
            }, {
                value: "center",
                text: "居中"
            }, {
                value: "top",
                text: "居上"
            }, {
                value: "bottom",
                text: "局下"
            }],
        }
    }]
});

Vvveb.Components.extend("_base", "html/container", {
    classes: ["container", "container-fluid"],
    image: "icons/container.svg",
    html: '<div class="container" style="min-height:150px;"><div class="m-5">容器</div></div>',
    name: "容器",
    properties: [
        {
            name: "类型",
            key: "type",
            htmlAttr: "class",
            inputtype: SelectInput,
            validValues: ["container", "container-fluid"],
            data: {
                options: [{
                    value: "container",
                    text: "默认"
                }, {
                    value: "container-fluid",
                    text: "流体"
                }]
            }
        },
        {
            name: "背景",
            key: "background",
            htmlAttr: "class",
            validValues: bgcolorClasses,
            inputtype: SelectInput,
            data: {
                options: bgcolorSelectOptions
            }
        },
        {
            name: "背景色",
            key: "background-color",
            htmlAttr: "style",
            inputtype: ColorInput,
        },
        {
            name: "文本颜色",
            key: "color",
            htmlAttr: "style",
            inputtype: ColorInput,
        }],
});

Vvveb.Components.extend("_base", "html/heading", {
    image: "icons/heading.svg",
    name: "标题",
    nodes: ["h1", "h2", "h3", "h4", "h5", "h6"],
    html: "<h1>标题</h1>",

    properties: [
        {
            name: "尺寸",
            key: "size",
            inputtype: SelectInput,

            onChange: function(node, value) {

                return changeNodeName(node, "h" + value);
            },

            init: function(node) {
                var regex;
                regex = /H(\d)/.exec(node.nodeName);
                if(regex && regex[1]) {
                    return regex[1]
                }
                return 1
            },

            data: {
                options: [{
                    value: "1",
                    text: "1"
                }, {
                    value: "2",
                    text: "2"
                }, {
                    value: "3",
                    text: "3"
                }, {
                    value: "4",
                    text: "4"
                }, {
                    value: "5",
                    text: "5"
                }, {
                    value: "6",
                    text: "6"
                }]
            },
        }]
});
Vvveb.Components.extend("_base", "html/link", {
    nodes: ["a"],
    name: "链接",
    html: '<a href="#" class="d-inline-block"><span>链接</span></a>',
    image: "icons/link.svg",
    properties: [{
        name: "链接地址",
        key: "href",
        htmlAttr: "href",
        inputtype: LinkInput
    }, {
        name: "链接目标",
        key: "target",
        htmlAttr: "target",
        inputtype: TextInput
    }]
});
Vvveb.Components.extend("_base", "html/image", {
    nodes: ["img"],
    name: "图片",
    html: '<img src="' + Vvveb.baseUrl + 'icons/image.svg" height="128" width="128">',
    /*
    afterDrop: function (node)
    {
        node.attr("src", '');
        return node;
    },*/
    image: "icons/image.svg",
    properties: [{
        name: "图片",
        key: "src",
        htmlAttr: "src",
        inputtype: ImageInput
    }, {
        name: "宽",
        key: "width",
        htmlAttr: "width",
        inputtype: TextInput
    }, {
        name: "高",
        key: "height",
        htmlAttr: "height",
        inputtype: TextInput
    }, {
        name: "代替文本",
        key: "alt",
        htmlAttr: "alt",
        inputtype: TextInput
    }]
});
Vvveb.Components.add("html/hr", {
    image: "icons/hr.svg",
    nodes: ["hr"],
    name: "水平线",
    html: "<hr>"
});
Vvveb.Components.extend("_base", "html/label", {
    name: "标签",
    nodes: ["label"],
    html: '<label for="">标签</label>',
    properties: [{
        name: "用于元素ID",
        htmlAttr: "for",
        key: "for",
        inputtype: TextInput
    }]
});
Vvveb.Components.extend("_base", "html/button", {
    classes: ["btn", "btn-link"],
    name: "按钮",
    image: "icons/button.svg",
    html: '<button type="button" class="btn btn-primary">按钮</button>',
    properties: [{
        name: "链接",
        key: "href",
        htmlAttr: "href",
        inputtype: LinkInput
    }, {
        name: "类型",
        key: "type",
        htmlAttr: "class",
        inputtype: SelectInput,
        validValues: ["btn-default", "btn-primary", "btn-info", "btn-success", "btn-warning", "btn-info", "btn-light", "btn-dark", "btn-outline-primary", "btn-outline-info", "btn-outline-success", "btn-outline-warning", "btn-outline-info", "btn-outline-light", "btn-outline-dark", "btn-link"],
        data: {
            options: [{
                value: "btn-default",
                text: "默认"
            }, {
                value: "btn-primary",
                text: "主色"
            }, {
                value: "btn btn-info",
                text: "信息按钮"
            }, {
                value: "btn-success",
                text: "成功"
            }, {
                value: "btn-warning",
                text: "警告"
            }, {
                value: "btn-info",
                text: "信息"
            }, {
                value: "btn-light",
                text: "高亮"
            }, {
                value: "btn-dark",
                text: "暗色"
            }, {
                value: "btn-outline-primary",
                text: "主色外边框"
            }, {
                value: "btn btn-outline-info",
                text: "信息色按钮外边框"
            }, {
                value: "btn-outline-success",
                text: "成功色外边框"
            }, {
                value: "btn-outline-warning",
                text: "警告色外边框"
            }, {
                value: "btn-outline-info",
                text: "信息色外边框"
            }, {
                value: "btn-outline-light",
                text: "高亮色外边框"
            }, {
                value: "btn-outline-dark",
                text: "暗色外边框"
            }, {
                value: "btn-link",
                text: "链接"
            }]
        }
    }, {
        name: "尺寸",
        key: "size",
        htmlAttr: "class",
        inputtype: SelectInput,
        validValues: ["btn-lg", "btn-sm"],
        data: {
            options: [{
                value: "",
                text: "默认"
            }, {
                value: "btn-lg",
                text: "大"
            }, {
                value: "btn-sm",
                text: "小"
            }]
        }
    }, {
        name: "目标",
        key: "target",
        htmlAttr: "target",
        inputtype: TextInput
    }, {
        name: "禁用",
        key: "disabled",
        htmlAttr: "class",
        inputtype: ToggleInput,
        validValues: ["disabled"],
        data: {
            on: "disabled",
            off: null
        }
    }]
});
Vvveb.Components.extend("_base", "html/buttongroup", {
    classes: ["btn-group"],
    name: "按钮组",
    image: "icons/button_group.svg",
    html: '<div class="btn-group" role="group" aria-label="Basic example"><button type="button" class="btn btn-secondary">Left</button><button type="button" class="btn btn-secondary">Middle</button> <button type="button" class="btn btn-secondary">Right</button></div>',
    properties: [{
        name: "尺寸",
        key: "size",
        htmlAttr: "class",
        inputtype: SelectInput,
        validValues: ["btn-group-lg", "btn-group-sm"],
        data: {
            options: [{
                value: "",
                text: "默认"
            }, {
                value: "btn-group-lg",
                text: "大"
            }, {
                value: "btn-group-sm",
                text: "小"
            }]
        }
    }, {
        name: "对齐",
        key: "alignment",
        htmlAttr: "class",
        inputtype: SelectInput,
        validValues: ["btn-group", "btn-group-vertical"],
        data: {
            options: [{
                value: "",
                text: "默认"
            }, {
                value: "btn-group",
                text: "水平对齐"
            }, {
                value: "btn-group-vertical",
                text: "垂直对齐"
            }]
        }
    }]
});
Vvveb.Components.extend("_base", "html/buttontoolbar", {
    classes: ["btn-toolbar"],
    name: "按钮工具栏",
    image: "icons/button_toolbar.svg",
    html: '<div class="btn-toolbar" role="toolbar" aria-label="按钮工具栏组">\
		  <div class="btn-group mr-2" role="group" aria-label="First group">\
			<button type="button" class="btn btn-secondary">1</button>\
			<button type="button" class="btn btn-secondary">2</button>\
			<button type="button" class="btn btn-secondary">3</button>\
			<button type="button" class="btn btn-secondary">4</button>\
		  </div>\
		  <div class="btn-group mr-2" role="group" aria-label="第二组">\
			<button type="button" class="btn btn-secondary">5</button>\
			<button type="button" class="btn btn-secondary">6</button>\
			<button type="button" class="btn btn-secondary">7</button>\
		  </div>\
		  <div class="btn-group" role="group" aria-label="第三组">\
			<button type="button" class="btn btn-secondary">8</button>\
		  </div>\
		</div>'
});
Vvveb.Components.extend("_base", "html/alert", {
    classes: ["alert"],
    name: "警告框",
    image: "icons/alert.svg",
    html: '<div class="alert alert-warning alert-dismissible fade show" role="alert">\
		  <button type="button" class="close" data-dismiss="alert" aria-label="关闭">\
			<span aria-hidden="true">&times;</span>\
		  </button>\
		  <strong>卧槽!</strong> 在下面输入框中填写相关内容.\
		</div>',
    properties: [{
        name: "类型",
        key: "type",
        htmlAttr: "class",
        validValues: ["alert-primary", "alert-secondary", "alert-success", "alert-danger", "alert-warning", "alert-info", "alert-light", "alert-dark"],
        inputtype: SelectInput,
        data: {
            options: [{
                value: "alert-primary",
                text: "默认"
            }, {
                value: "alert-secondary",
                text: "辅助色"
            }, {
                value: "alert-success",
                text: "成功"
            }, {
                value: "alert-danger",
                text: "危险"
            }, {
                value: "alert-warning",
                text: "警告"
            }, {
                value: "alert-info",
                text: "一般信息"
            }, {
                value: "alert-light",
                text: "高亮"
            }, {
                value: "alert-dark",
                text: "暗色"
            }]
        }
    }]
});
Vvveb.Components.extend("_base", "html/badge", {
    classes: ["badge"],
    image: "icons/badge.svg",
    name: "Badge",
    html: '<span class="badge badge-primary">Primary badge</span>',
    properties: [{
        name: "颜色",
        key: "color",
        htmlAttr: "class",
        validValues: ["badge-primary", "badge-secondary", "badge-success", "badge-danger", "badge-warning", "badge-info", "badge-light", "badge-dark"],
        inputtype: SelectInput,
        data: {
            options: [{
                value: "",
                text: "默认"
            }, {
                value: "badge-primary",
                text: "主色"
            }, {
                value: "badge-secondary",
                text: "辅助色"
            }, {
                value: "badge-success",
                text: "成功"
            }, {
                value: "badge-warning",
                text: "警告"
            }, {
                value: "badge-danger",
                text: "微信"
            }, {
                value: "badge-info",
                text: "一般信息"
            }, {
                value: "badge-light",
                text: "高亮"
            }, {
                value: "badge-dark",
                text: "暗色"
            }]
        }
    }]
});
Vvveb.Components.extend("_base", "html/card", {
    classes: ["card"],
    image: "icons/panel.svg",
    name: "卡片",
    html: '<div class="card">\
		  <img class="card-img-top" src="../libs/builder/icons/image.svg" alt="卡片封面" width="128" height="128">\
		  <div class="card-body">\
			<h4 class="card-title">卡片标题</h4>\
			<p class="card-text">一些快速的示例文本可以在卡片标题上构建，并构成卡片内容的大部分。</p>\
			<a href="#" class="btn btn-primary">链接</a>\
		  </div>\
		</div>'
});
Vvveb.Components.extend("_base", "html/listgroup", {
    name: "列表组",
    image: "icons/list_group.svg",
    classes: ["list-group"],
    html: '<ul class="list-group">\n  <li class="list-group-item">\n    <span class="badge">14</span>\n    第一项\n  </li>\n  <li class="list-group-item">\n    <span class="badge">2</span>\n    第二项\n  </li>\n  <li class="list-group-item">\n    <span class="badge">1</span>\n    第三项\n  </li>\n</ul>'
});
Vvveb.Components.extend("_base", "html/listitem", {
    name: "列表项",
    classes: ["list-group-item"],
    html: '<li class="list-group-item"><span class="badge">14</span> 第一项</li>'
});
Vvveb.Components.extend("_base", "html/breadcrumbs", {
    classes: ["breadcrumb"],
    name: "面包屑导航",
    image: "icons/breadcrumbs.svg",
    html: '<ol class="breadcrumb">\
		  <li class="breadcrumb-item active"><a href="#">首页</a></li>\
		  <li class="breadcrumb-item active"><a href="#">联系我们</a></li>\
		  <li class="breadcrumb-item active">关于我们</li>\
		</ol>'
});
Vvveb.Components.extend("_base", "html/breadcrumbitem", {
    classes: ["breadcrumb-item"],
    name: "面包屑导航项",
    html: '<li class="breadcrumb-item"><a href="#">联系我们</a></li>',
    properties: [{
        name: "激活?",
        key: "active",
        htmlAttr: "class",
        validValues: ["", "active"],
        inputtype: ToggleInput,
        data: {
            on: "active",
            off: ""
        }
    }]
});
Vvveb.Components.extend("_base", "html/pagination", {
    classes: ["pagination"],
    name: "分页",
    image: "icons/pagination.svg",
    html: '<nav aria-label="分页示例">\
	  <ul class="pagination">\
		<li class="page-item"><a class="page-link" href="#">上一页</a></li>\
		<li class="page-item"><a class="page-link" href="#">1</a></li>\
		<li class="page-item"><a class="page-link" href="#">2</a></li>\
		<li class="page-item"><a class="page-link" href="#">3</a></li>\
		<li class="page-item"><a class="page-link" href="#">下一页</a></li>\
	  </ul>\
	</nav>',

    properties: [{
        name: "尺寸",
        key: "size",
        htmlAttr: "class",
        inputtype: SelectInput,
        validValues: ["btn-lg", "btn-sm"],
        data: {
            options: [{
                value: "",
                text: "默认"
            }, {
                value: "btn-lg",
                text: "Large"
            }, {
                value: "btn-sm",
                text: "Small"
            }]
        }
    }, {
        name: "对齐方式",
        key: "alignment",
        htmlAttr: "class",
        inputtype: SelectInput,
        validValues: ["justify-content-center", "justify-content-end"],
        data: {
            options: [{
                value: "",
                text: "默认"
            }, {
                value: "justify-content-center",
                text: "居中"
            }, {
                value: "justify-content-end",
                text: "居右"
            }]
        }
    }]
});
Vvveb.Components.extend("_base", "html/pageitem", {
    classes: ["page-item"],
    html: '<li class="page-item"><a class="page-link" href="#">1</a></li>',
    name: "分页项",
    properties: [{
        name: "链接",
        key: "href",
        htmlAttr: "href",
        child: ".page-link",
        inputtype: TextInput
    }, {
        name: "禁用?",
        key: "disabled",
        htmlAttr: "class",
        validValues: ["disabled"],
        inputtype: ToggleInput,
        data: {
            on: "disabled",
            off: ""
        }
    }]
});
Vvveb.Components.extend("_base", "html/progress", {
    classes: ["progress"],
    name: "进度条",
    image: "icons/progressbar.svg",
    html: '<div class="progress"><div class="progress-bar w-25"></div></div>',
    properties: [{
        name: "背景色",
        key: "background",
        htmlAttr: "class",
        validValues: bgcolorClasses,
        inputtype: SelectInput,
        data: {
            options: bgcolorSelectOptions
        }
    },
    {
        name: "进度",
        key: "background",
        child: ".progress-bar",
        htmlAttr: "class",
        validValues: ["", "w-25", "w-50", "w-75", "w-100"],
        inputtype: SelectInput,
        data: {
            options: [{
                value: "",
                text: "None"
            }, {
                value: "w-25",
                text: "25%"
            }, {
                value: "w-50",
                text: "50%"
            }, {
                value: "w-75",
                text: "75%"
            }, {
                value: "w-100",
                text: "100%"
            }]
        }
    },
    {
        name: "进度条颜色",
        key: "background",
        child: ".progress-bar",
        htmlAttr: "class",
        validValues: bgcolorClasses,
        inputtype: SelectInput,
        data: {
            options: bgcolorSelectOptions
        }
    }, {
        name: "条纹?",
        key: "striped",
        child: ".progress-bar",
        htmlAttr: "class",
        validValues: ["", "progress-bar-striped"],
        inputtype: ToggleInput,
        data: {
            on: "progress-bar-striped",
            off: "",
        }
    }, {
        name: "动画?",
        key: "animated",
        child: ".progress-bar",
        htmlAttr: "class",
        validValues: ["", "progress-bar-animated"],
        inputtype: ToggleInput,
        data: {
            on: "progress-bar-animated",
            off: "",
        }
    }]
});
Vvveb.Components.extend("_base", "html/jumbotron", {
    classes: ["jumbotron"],
    image: "icons/jumbotron.svg",
    name: "巨幕",
    html: '<div class="jumbotron">\
		  <h1 class="display-3">Hello, world!</h1>\
		  <p class="lead">This is a simple hero unit, a simple jumbotron-style component for calling extra attention to featured content or information.</p>\
		  <hr class="my-4">\
		  <p>It uses utility classes for typography and spacing to space content out within the larger container.</p>\
		  <p class="lead">\
			<a class="btn btn-primary btn-lg" href="#" role="button">Learn more</a>\
		  </p>\
		</div>'
});
Vvveb.Components.extend("_base", "html/navbar", {
    classes: ["navbar"],
    image: "icons/navbar.svg",
    name: "导航条",
    html: '<nav class="navbar navbar-expand-lg navbar-light bg-light">\
		  <a class="navbar-brand" href="#">导航条</a>\
		  <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="切换导航">\
			<span class="navbar-toggler-icon"></span>\
		  </button>\
		\
		  <div class="collapse navbar-collapse" id="navbarSupportedContent">\
			<ul class="navbar-nav mr-auto">\
			  <li class="nav-item active">\
				<a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a>\
			  </li>\
			  <li class="nav-item">\
				<a class="nav-link" href="#">链接</a>\
			  </li>\
			  <li class="nav-item">\
				<a class="nav-link disabled" href="#">禁用</a>\
			  </li>\
			</ul>\
			<form class="form-inline my-2 my-lg-0">\
			  <input class="form-control mr-sm-2" type="text" placeholder="搜索" aria-label="Search">\
			  <button class="btn btn-outline-success my-2 my-sm-0" type="submit">搜索</button>\
			</form>\
		  </div>\
		</nav>',

    properties: [{
        name: "颜色主题",
        key: "color",
        htmlAttr: "class",
        validValues: ["navbar-light", "navbar-dark"],
        inputtype: SelectInput,
        data: {
            options: [{
                value: "",
                text: "默认"
            }, {
                value: "navbar-light",
                text: "高亮"
            }, {
                value: "navbar-dark",
                text: "暗色"
            }]
        }
    }, {
        name: "背景色",
        key: "background",
        htmlAttr: "class",
        validValues: bgcolorClasses,
        inputtype: SelectInput,
        data: {
            options: bgcolorSelectOptions
        }
    }, {
        name: "位置",
        key: "placement",
        htmlAttr: "class",
        validValues: ["fixed-top", "fixed-bottom", "sticky-top"],
        inputtype: SelectInput,
        data: {
            options: [{
                value: "",
                text: "默认"
            }, {
                value: "fixed-top",
                text: "固定顶部"
            }, {
                value: "fixed-bottom",
                text: "固定底部"
            }, {
                value: "sticky-top",
                text: "粘贴顶部"
            }]
        }
    }]
});

Vvveb.Components.extend("_base", "html/form", {
    nodes: ["form"],
    image: "icons/form.svg",
    name: "表单",
    html: '<form><div class="mb-3"><label>文本框</label><input type="text" class="form-control"></div></div></form>',
    properties: [{
        name: "样式",
        key: "style",
        htmlAttr: "class",
        validValues: ["", "form-search", "form-inline", "form-horizontal"],
        inputtype: SelectInput,
        data: {
            options: [{
                value: "",
                text: "默认"
            }, {
                value: "form-search",
                text: "搜索框"
            }, {
                value: "form-inline",
                text: "行内"
            }, {
                value: "form-horizontal",
                text: "水平排列"
            }]
        }
    }, {
        name: "提交页面",
        key: "action",
        htmlAttr: "action",
        inputtype: TextInput
    }, {
        name: "提交方法",
        key: "method",
        htmlAttr: "method",
        inputtype: TextInput
    }]
});

Vvveb.Components.extend("_base", "html/textinput", {
    name: "输入框",
    nodes: ["input"],
    //attributes: {"type":"text"},
    image: "icons/text_input.svg",
    html: '<div class="mb-3"><label>文本框</label><input type="text" class="form-control"></div></div>',
    properties: [{
        name: "值",
        key: "value",
        htmlAttr: "value",
        inputtype: TextInput
    }, {
        name: "类型",
        key: "type",
        htmlAttr: "type",
        inputtype: SelectInput,
        data: {
            options: [{
                value: "text",
                text: "文本"
            }, {
                value: "button",
                text: "按钮"
            }, {

                value: "checkbox",
                text: "多选框"
            }, {

                value: "color",
                text: "颜色选择"
            }, {

                value: "date",
                text: "日期"
            }, {

                value: "datetime-local",
                text: "本地日期"
            }, {

                value: "email",
                text: "邮箱"
            }, {

                value: "file",
                text: "文件选择"
            }, {

                value: "hidden",
                text: "隐藏"
            }, {

                value: "image",
                text: "图片按钮"
            }, {

                value: "month",
                text: "月份选择"
            }, {

                value: "number",
                text: "数字"
            }, {

                value: "password",
                text: "密码"
            }, {

                value: "radio",
                text: "单选框"
            }, {

                value: "range",
                text: "滑动输入条"
            }, {

                value: "reset",
                text: "重置表单"
            }, {

                value: "search",
                text: "搜索"
            }, {

                value: "submit",
                text: "提交"
            }, {

                value: "tel",
                text: "电话"
            }, {

                value: "time",
                text: "时间"
            }, {

                value: "url",
                text: "链接"
            }, {

                value: "week",
                text: "星期选择"
            }]
        }
    }, {
        name: "输入提示",
        key: "placeholder",
        htmlAttr: "placeholder",
        inputtype: TextInput
    }, {
        name: "禁用?",
        key: "disabled",
        htmlAttr: "disabled",
        col: 6,
        inputtype: CheckboxInput,
    }, {
        name: "必填项?",
        key: "required",
        htmlAttr: "required",
        col: 6,
        inputtype: CheckboxInput,
    }]
});

Vvveb.Components.extend("_base", "html/selectinput", {
    nodes: ["select"],
    name: "选择器",
    image: "icons/select_input.svg",
    html: '<div class="mb-3"><label>请选择一项</label><select class="form-control"><option value="value1">选项1</option><option value="value2">选项2</option><option value="value3">选项3</option></select></div>',

    beforeInit: function(node) {
        properties = [];
        var i = 0;

        $(node).find('option').each(function() {

            data = { "value": this.value, "text": this.text };

            i++;
            properties.push({
                name: "选项 " + i,
                key: "option" + i,
                //index: i - 1,
                optionNode: this,
                inputtype: TextValueInput,
                data: data,
                onChange: function(node, value, input) {

                    option = $(this.optionNode);

                    //if remove button is clicked remove option and render row properties
                    if(input.nodeName == 'BUTTON') {
                        option.remove();
                        Vvveb.Components.render("html/selectinput");
                        return node;
                    }

                    if(input.name == "value") option.attr("value", value);
                    else if(input.name == "text") option.text(value);

                    return node;
                },
            });
        });

        //remove all option properties
        this.properties = this.properties.filter(function(item) {
            return item.key.indexOf("option") === -1;
        });

        //add remaining properties to generated column properties
        properties.push(this.properties[0]);

        this.properties = properties;
        return node;
    },

    properties: [{
        name: "选项",
        key: "option1",
        inputtype: TextValueInput
    }, {
        name: "选项",
        key: "option2",
        inputtype: TextValueInput
    }, {
        name: "",
        key: "addChild",
        inputtype: ButtonInput,
        data: { text: "添加选项", icon: "la-plus" },
        onChange: function(node) {
            $(node).append('<option value="value">选项</option>');

            //render component properties again to include the new column inputs
            Vvveb.Components.render("html/selectinput");

            return node;
        }
    }]
});
Vvveb.Components.extend("_base", "html/textareainput", {
    name: "多行文本框",
    image: "icons/text_area.svg",
    html: '<div class="mb-3"><label>自我介绍:</label><textarea class="form-control"></textarea></div>'
});
Vvveb.Components.extend("_base", "html/radiobutton", {
    name: "单选按钮",
    attributes: { "type": "radio" },
    image: "icons/radio.svg",
    html: '<label class="radio"><input type="radio"> 单选</label>',
    properties: [{
        name: "名称",
        key: "name",
        htmlAttr: "name",
        inputtype: TextInput
    }]
});
Vvveb.Components.extend("_base", "html/checkbox", {
    name: "多选框",
    attributes: { "type": "checkbox" },
    image: "icons/checkbox.svg",
    html: '<label class="checkbox"><input type="checkbox"> 多选框</label>',
    properties: [{
        name: "名称",
        key: "name",
        htmlAttr: "name",
        inputtype: TextInput
    }]
});
Vvveb.Components.extend("_base", "html/fileinput", {
    name: "输入框组",
    attributes: { "type": "file" },
    image: "icons/text_input.svg",
    html: '<div class="mb-3">\
			  <input type="file" class="form-control">\
			</div>'
});
Vvveb.Components.extend("_base", "html/table", {
    nodes: ["table"],
    classes: ["table"],
    image: "icons/table.svg",
    name: "表格",
    html: '<table class="table">\
		  <thead>\
			<tr>\
			  <th>#</th>\
			  <th>姓</th>\
			  <th>名字</th>\
			  <th>用户名</th>\
			</tr>\
		  </thead>\
		  <tbody>\
			<tr>\
			  <th scope="row">1</th>\
			  <td>张</td>\
			  <td>三</td>\
			  <td>zhangsan</td>\
			</tr>\
			<tr>\
			  <th scope="row">2</th>\
			  <td>李</td>\
			  <td>四</td>\
			  <td>lisi</td>\
			</tr>\
			<tr>\
			  <th scope="row">3</th>\
			  <td>王</td>\
			  <td>五</td>\
			  <td>wangwu</td>\
			</tr>\
		  </tbody>\
		</table>',
    properties: [
        {
            name: "类型",
            key: "type",
            htmlAttr: "class",
            validValues: ["table-primary", "table-secondary", "table-success", "table-danger", "table-warning", "table-info", "table-light", "table-dark", "table-white"],
            inputtype: SelectInput,
            data: {
                options: [{
                    value: "默认",
                    text: ""
                }, {
                    value: "table-primary",
                    text: "默认"
                }, {
                    value: "table-secondary",
                    text: "辅助色"
                }, {
                    value: "table-success",
                    text: "成功"
                }, {
                    value: "table-danger",
                    text: "危险"
                }, {
                    value: "table-warning",
                    text: "警告"
                }, {
                    value: "table-info",
                    text: "一般信息"
                }, {
                    value: "table-light",
                    text: "高亮"
                }, {
                    value: "table-dark",
                    text: "暗色"
                }, {
                    value: "table-white",
                    text: "白色"
                }]
            }
        },
        {
            name: "响应式?",
            key: "responsive",
            htmlAttr: "class",
            validValues: ["table-responsive"],
            inputtype: ToggleInput,
            data: {
                on: "table-responsive",
                off: ""
            }
        },
        {
            name: "紧凑型?",
            key: "small",
            htmlAttr: "class",
            validValues: ["table-sm"],
            inputtype: ToggleInput,
            data: {
                on: "table-sm",
                off: ""
            }
        },
        {
            name: "鼠标悬停?",
            key: "hover",
            htmlAttr: "class",
            validValues: ["table-hover"],
            inputtype: ToggleInput,
            data: {
                on: "table-hover",
                off: ""
            }
        },
        {
            name: "边框?",
            key: "bordered",
            htmlAttr: "class",
            validValues: ["table-bordered"],
            inputtype: ToggleInput,
            data: {
                on: "table-bordered",
                off: ""
            }
        },
        {
            name: "条纹?",
            key: "striped",
            htmlAttr: "class",
            validValues: ["table-striped"],
            inputtype: ToggleInput,
            data: {
                on: "table-striped",
                off: ""
            }
        },
        {
            name: "反转色?",
            key: "inverse",
            htmlAttr: "class",
            validValues: ["table-inverse"],
            inputtype: ToggleInput,
            data: {
                on: "table-inverse",
                off: ""
            }
        },
        {
            name: "无边界线?",
            key: "borderless",
            htmlAttr: "class",
            validValues: ["table-borderless"],
            inputtype: ToggleInput,
            data: {
                on: "table-borderless",
                off: ""
            }
        },
        {
            name: "表头选项",
            key: "head",
            htmlAttr: "class",
            child: "thead",
            inputtype: SelectInput,
            validValues: ["", "thead-light", "thead-dark"],
            data: {
                options: [{
                    value: "",
                    text: "默认"
                }, {
                    value: "thead-light",
                    text: "亮色"
                }, {
                    value: "thead-dark",
                    text: "暗色"
                }]
            }
        }]
});
Vvveb.Components.extend("_base", "html/tablerow", {
    nodes: ["tr"],
    name: "表行",
    html: "<tr><td>单元格 1</td><td>单元格 2</td><td>单元格 3</td></tr>",
    properties: [{
        name: "类型",
        key: "type",
        htmlAttr: "class",
        inputtype: SelectInput,
        validValues: ["", "success", "danger", "warning", "active"],
        data: {
            options: [{
                value: "",
                text: "默认"
            }, {
                value: "success",
                text: "成功"
            }, {
                value: "error",
                text: "错误"
            }, {
                value: "warning",
                text: "警告"
            }, {
                value: "active",
                text: "激活"
            }]
        }
    }]
});
Vvveb.Components.extend("_base", "html/tablecell", {
    nodes: ["td"],
    name: "单元格",
    html: "<td>单元格</td>"
});
Vvveb.Components.extend("_base", "html/tableheadercell", {
    nodes: ["th"],
    name: "表头单元格",
    html: "<th>表头</th>"
});
Vvveb.Components.extend("_base", "html/tablehead", {
    nodes: ["thead"],
    name: "表头",
    html: "<thead><tr><th>表头单元格 1</th><th>表头单元格 2</th><th>表头单元格 3</th></tr></thead>",
    properties: [{
        name: "类型",
        key: "type",
        htmlAttr: "class",
        inputtype: SelectInput,
        validValues: ["", "success", "danger", "warning", "info"],
        data: {
            options: [{
                value: "",
                text: "默认"
            }, {
                value: "success",
                text: "成功"
            }, {
                value: "anger",
                text: "错误"
            }, {
                value: "warning",
                text: "警告"
            }, {
                value: "info",
                text: "一般信息"
            }]
        }
    }]
});
Vvveb.Components.extend("_base", "html/tablebody", {
    nodes: ["tbody"],
    name: "表体",
    html: "<tbody><tr><td>单元格 1</td><td>单元格 2</td><td>单元格 3</td></tr></tbody>"
});

Vvveb.Components.add("html/gridcolumn", {
    name: "栅格列",
    image: "icons/grid_row.svg",
    classesRegex: ["col-"],
    html: '<div class="col-sm-4"><h3>col-sm-4</h3></div>',
    properties: [{
        name: "列",
        key: "column",
        inputtype: GridInput,
        data: { hide_remove: true },

        beforeInit: function(node) {
            _class = $(node).attr("class");

            var reg = /col-([^-\$ ]*)?-?(\d+)/g;
            var match;

            while((match = reg.exec(_class)) != null) {
                this.data["col" + ((match[1] != undefined) ? "_" + match[1] : "")] = match[2];
            }
        },

        onChange: function(node, value, input) {
            var _class = node.attr("class");

            //remove previous breakpoint column size
            _class = _class.replace(new RegExp(input.name + '-\\d+?'), '');
            //add new column size
            if(value) _class += ' ' + input.name + '-' + value;
            node.attr("class", _class);

            return node;
        },
    }]
});
Vvveb.Components.add("html/gridrow", {
    name: "栅格行",
    image: "icons/grid_row.svg",
    classes: ["row"],
    html: '<div class="row"><div class="col-sm-4"><h3>col-sm-4</h3></div><div class="col-sm-4 col-5"><h3>col-sm-4</h3></div><div class="col-sm-4"><h3>col-sm-4</h3></div></div>',
    children: [{
        name: "html/gridcolumn",
        classesRegex: ["col-"],
    }],
    beforeInit: function(node) {
        properties = [];
        var i = 0;
        var j = 0;

        $(node).find('[class*="col-"]').each(function() {
            _class = $(this).attr("class");

            var reg = /col-([^-\$ ]*)?-?(\d+)/g;
            var match;
            var data = {};

            while((match = reg.exec(_class)) != null) {
                data["col" + ((match[1] != undefined) ? "_" + match[1] : "")] = match[2];
            }

            i++;
            properties.push({
                name: "列 " + i,
                key: "column" + i,
                //index: i - 1,
                columnNode: this,
                col: 12,
                inline: true,
                inputtype: GridInput,
                data: data,
                onChange: function(node, value, input) {

                    //column = $('[class*="col-"]:eq(' + this.index + ')', node);
                    var column = $(this.columnNode);

                    //if remove button is clicked remove column and render row properties
                    if(input.nodeName == 'BUTTON') {
                        column.remove();
                        Vvveb.Components.render("html/gridrow");
                        return node;
                    }

                    //if select input then change column class
                    _class = column.attr("class");

                    //remove previous breakpoint column size
                    _class = _class.replace(new RegExp(input.name + '-\\d+?'), '');
                    //add new column size
                    if(value) _class += ' ' + input.name + '-' + value;
                    column.attr("class", _class);

                    //console.log(this, node, value, input, input.name);

                    return node;
                },
            });
        });

        //remove all column properties
        this.properties = this.properties.filter(function(item) {
            return item.key.indexOf("column") === -1;
        });

        //add remaining properties to generated column properties
        properties.push(this.properties[0]);

        this.properties = properties;
        return node;
    },

    properties: [{
        name: "列",
        key: "column1",
        inputtype: GridInput
    }, {
        name: "列",
        key: "column1",
        inline: true,
        col: 12,
        inputtype: GridInput
    }, {
        name: "",
        key: "addChild",
        inputtype: ButtonInput,
        data: { text: "添加列", icon: "la la-plus" },
        onChange: function(node) {
            $(node).append('<div class="col-3">Col-3</div>');

            //render component properties again to include the new column inputs
            Vvveb.Components.render("html/gridrow");

            return node;
        }
    }]
});


Vvveb.Components.extend("_base", "html/paragraph", {
    nodes: ["p"],
    name: "段落",
    image: "icons/paragraph.svg",
    html: '<p>Lorem ipsum</p>',
    properties: [{
        name: "文字对齐",
        key: "text-align",
        htmlAttr: "class",
        inputtype: SelectInput,
        validValues: ["", "text-left", "text-center", "text-right"],
        inputtype: RadioButtonInput,
        data: {
            extraclass: "btn-group-sm btn-group-fullwidth",
            options: [{
                value: "",
                icon: "la la-times",
                //text: "None",
                title: "无",
                checked: true,
            }, {
                value: "text-left",
                //text: "Left",
                title: "文本居左",
                icon: "la la-align-left",
                checked: false,
            }, {
                value: "text-center",
                //text: "Center",
                title: "文本居中",
                icon: "la la-align-center",
                checked: false,
            }, {
                value: "text-right",
                //text: "Right",
                title: "文本居右",
                icon: "la la-align-right",
                checked: false,
            }],
        },
    }]
});

Vvveb.Components.extend("_base", "html/video", {
    nodes: ["video"],
    name: "视频",
    html: '<video width="320" height="240" playsinline loop autoplay><source src="https://storage.googleapis.com/coverr-main/mp4/Mt_Baker.mp4"><video>',
    dragHtml: '<img  width="320" height="240" src="' + Vvveb.baseUrl + 'icons/video.svg">',
    image: "icons/video.svg",
    properties: [{
        name: "视频地址",
        child: "source",
        key: "src",
        htmlAttr: "src",
        inputtype: LinkInput
    }, {
        name: "宽",
        key: "width",
        htmlAttr: "width",
        inputtype: TextInput
    }, {
        name: "高",
        key: "height",
        htmlAttr: "height",
        inputtype: TextInput
    }, {
        name: "静音?",
        key: "muted",
        htmlAttr: "muted",
        inputtype: CheckboxInput
    }, {
        name: "循环播放?",
        key: "loop",
        htmlAttr: "loop",
        inputtype: CheckboxInput
    }, {
        name: "自动播放?",
        key: "autoplay",
        htmlAttr: "autoplay",
        inputtype: CheckboxInput
    }, {
        name: "默认全屏(实验性)?",
        key: "playsinline",
        htmlAttr: "playsinline",
        inputtype: CheckboxInput
    }, {
        name: "控制条?",
        key: "controls",
        htmlAttr: "controls",
        inputtype: CheckboxInput
    }]
});


Vvveb.Components.extend("_base", "html/button", {
    nodes: ["button"],
    name: "Html按钮",
    image: "icons/button.svg",
    html: '<button>Html按钮</button>',
    properties: [{
        name: "按钮文本",
        key: "text",
        htmlAttr: "innerHTML",
        inputtype: TextInput
    }, {
        name: "按钮名字(只能英文)",
        key: "name",
        htmlAttr: "name",
        inputtype: TextInput
    }, {
        name: "类型",
        key: "type",
        htmlAttr: "type",
        inputtype: SelectInput,
        data: {
            options: [{
                value: "button",
                text: "普通按钮"
            }, {
                value: "reset",
                text: "重置按钮"
            }, {
                value: "submit",
                text: "提交按钮"
            }],
        }
    }, {
        name: "自动获取焦点?",
        key: "autofocus",
        htmlAttr: "autofocus",
        inputtype: CheckboxInput,
        inline: true,
        col: 6,
    }, {
        name: "禁用?",
        key: "disabled",
        htmlAttr: "disabled",
        inputtype: CheckboxInput,
        inline: true,
        col: 6,
    }]
});

Vvveb.Components.extend("_base", "_base", {
    properties: [
        {
            name: "字体",
            key: "font-family",
            htmlAttr: "style",
            sort: base_sort++,
            col: 6,
            inline: true,
            inputtype: SelectInput,
            data: {
                options: [{
                    value: "",
                    text: "extended"
                }, {
                    value: "Ggoogle ",
                    text: "google"
                }]
            }
        }]
});
